﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="Position.aspx.cs" Inherits="ControlExplorer.C1Menu.Position" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Menu"
	TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<input type="button" value="点击这里" id="btn1" />
	<wijmo:C1Menu runat="server" ID="Menu1" Orientation="Vertical" Trigger="#btn1" TriggerEvent="Click">
		<Items>
			<wijmo:C1MenuItem ID="C1MenuItem1" runat="server" Text="突发新闻">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem2" runat="server" Text="娱乐">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem3" runat="server" Text="财政">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem4" runat="server" Text="食物 &#38; 烹饪">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem5" runat="server" Text="生活方式">
				<Items>
					<wijmo:C1MenuItem ID="C1MenuItem8" runat="server" Text="子菜单"></wijmo:C1MenuItem>
				</Items>
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem6" runat="server" Text="新闻">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem7" runat="server" Text="政治">
			</wijmo:C1MenuItem>
			<wijmo:C1MenuItem ID="C1MenuItem9" runat="server" Text="运动">
			</wijmo:C1MenuItem>
		</Items>
	</wijmo:C1Menu>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#my1,#my2,#at1,#at2").change(function () {
				$("#<%= Menu1.ClientID %>").c1menu("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value });
			});
		});

	</script>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>本示例展示了怎样用 <strong>Position</strong> 属性来使一个菜单与一个触发器相关联，例如单击一个按钮来打开菜单。</p>
	<p>本例中用到了以下属性：</p>
	<ul>
		<li><strong>Position</strong> - 把控件置于相对于另一个文档元素的位置，此属性是基于jQuery UI的位置部件。</li>
	</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<div class="option-row">
		<label>
			我的</label>
		<select id="my1">
			<option value="left">左边</option>
			<option value="center">中心</option>
			<option value="right">右边</option>
		</select>
		<select id="my2">
			<option value="top">顶部</option>
			<option value="center">中心</option>
			<option value="bottom">底部</option>
		</select>
	</div>
	<div class="option-row">
		<label>
			位于</label>
		<select id="at1">
			<option value="left">左边</option>
			<option value="center">中心</option>
			<option value="right">右边</option>
		</select>
		<select id="at2">
			<option value="top">顶部</option>
			<option value="center">中心</option>
			<option value="bottom" selected="selected">底部</option>
		</select>
	</div>
</asp:Content>
